<template>
  <div class="check-con">
    <el-steps direction="vertical" :active="18" :space="180" finish-status="success">
      <template v-for="item in stepArr">
        <el-step :title="item.txt" icon="el-icon-warning-outline" :status="item.type == 1 ? 'success' : item.type == 2 ? 'finish' : 'error'
          ">
          <template v-slot:description>
            <div style="color: #909399;min-width:300px;" v-if="item.type != 1">
              问题：{{ item.desc }}
            </div>
          </template>
        </el-step>
      </template>
    </el-steps>
  </div>

  <div style="margin-top: 30px; text-align: center">
    <!-- <el-button type="plain" icon="el-icon-arrow-left" @click="prevStep()">返回</el-button> -->
    <!-- <el-button type="primary" :loading="isLoad" @click="submit()">提交校对<i
        class="el-icon-arrow-right el-icon--right"></i></el-button> -->
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getTipList } from '@/api/yearCheck/index'

const props = defineProps({
  currentRow: {
    type: Object,
    default: {}
  }
})

const step = [
  ['', '基本信息', '负责人任职', '年度登记/备案变更', '年度会议/换届', '内部管理情况', '机构设置情况', '党组织建设情况',
    '资产负债表', '业务活动表', '现金流量表', '本年度总结/下年度计划', '相关收支、职能', '接受捐赠资助及使用', '公益慈善支出',
    '评比达标表彰等活动', '援藏援疆及乡村振兴活动', '参与成渝经济圈建设情况', '接受监督检查情况', '其它需要说明的情况', '年检审核意见',
    '附件材料'
  ],
  ['', '基本信息', '从业人员情况', '负责人信息', '理事会成员/监事会情况', '内设机构情况', '内部管理情况', '接受监督管理情况',
    '开展公益活动情况', '承接政府委托职能、购买服务项目、政府补贴情况', '国际合作情况', '对外交流、国际组织', '对外活动建议',
    '举办刊物及公益活动', '援藏援疆及乡村振兴活动', '参与成渝经济圈建设情况', '年度工作报告', '年检审核意见', '资产负债表',
    '业务活动表', '现金流量表', '接受捐赠资助及使用', '公益慈善支出', '党组织建设情况', '上年度整改情况', '附件材料']

]

const stepArr = ref([
  {
    type: '3',
    txt: '6、机构设置情况',
    desc: '内设机构规定数量不超过6个，并且不允许设置派出机构。请做出相应整改。'
  },
  {
    type: '3',
    txt: '7、党建工作情况',
    desc: '党建活动太少，未有效开展，群团活动也为有效开展。'
  }
])

const activeStep = ref(0)
const isLoad = ref(false)


const getAllTip = () => {
  getTipList(props.currentRow.id).then(res => {
    const newStep = res.data.map(item => {
      const { description, pageNumber } = item
      return {
        desc: description,
        txt: `${pageNumber}、${step[props.currentRow.organizationType - 1][pageNumber]}`,
        type: '3',
      }
    })
    stepArr.value = newStep
  })
}

getAllTip()
// const submit = () => {
//   ElMessageBox.confirm(
//     '您确定要提交吗?',
//     '提示',
//     {
//       confirmButtonText: '确定',
//       cancelButtonText: '取消',
//       type: 'warning'
//     }
//   )
//     .then(() => {
//       this.isLoad = true;
//       setTimeout(() => {
//         ElMessage({
//           type: 'success',
//           message: '提交成功，请刷新页面查看最新数据。'
//         })
//         this.isLoad = false;
//       }, 1000)
//     })
//     .catch(() => { })
// }
</script>

<style scoped lang="scss">
//隐藏滚轮
::v-deep .el-switch.is-disabled {
  opacity: 1;
}

::v-deep .el-step__icon.is-icon {
  border-radius: 50%;
  border: 2px solid;
  border-color: inherit;
}

::v-deep .el-step__title {
  font-size: 14px;

  .is-finish {
    font-weight: lighter;
  }
}

::v-deep .el-step__head.is-finish,
::v-deep .el-step__title.is-finish {
  color: #ff9800;
  border-color: #ff9800;
}

// ::v-deep .el-step__head.is-success,
// ::v-deep .el-step__title.is-success {
//   color: #FF9800;
//   border-color: #FF9800;
// }

// ::v-deep .el-step__head.is-error,
// ::v-deep .el-step__title.is-error {
//   color: #FF9800;
//   border-color: #FF9800;
// }

.check-con {
  width: 100%;
  height: 400px;
  display: flex;

  ::-webkit-scrollbar {
    width: 0;
  }

  ， //将宽度设为0，滚动条就会隐藏。

  ::-webkit-scrollbar {
    display: none;
  }

  .check-item-result {
    width: 220px;
    margin-left: 10px;
    height: 600px;
    overflow: auto;

    .item-check {
      margin-bottom: 40px;

      .check-title {
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;

        &::before {
          position: absolute;
          content: '';
          background: #2652b3;
          height: 18px;
          width: 5px;
          border-radius: 2px;
          left: 0;
          top: 1px;
        }
      }
    }
  }

  .check-info {
    flex: 1;
    height: 600px;
    overflow: auto;
    padding-right: 20px;

    >div {
      transition: all 0.5s ease-in-out;
    }
  }
}
</style>
